<template>
  <div>
    <div id="echart" style="height: 400px"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"></div>
  </div>
  
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
    //将分页查询的疫情数据的前十条显示到折现图中
    //x轴显示省份，y轴显示确诊人数
    destroyed() {
      clearInterval(this.timer)
    },
    data(){
        return{
            timer:0,
            loading:true,
        }
    },
  computed: {
      ...mapState('data_list',['dataList'])
  },
  created () {
      this.timer = setInterval(() => {
          this.findData();
      }, 5000);
  },
  methods: {
      ...mapActions('data_list',['page_query']),
      findData(){
          this.page_query({
                page:1,
                pageSize:10
            }).then(()=>{
                let res1 = this.dataList.list.map((item)=>{
                    return item.province;
                })
                let res2 = this.dataList.list.map((item)=>{
                    return item.confirmed;
                })
    
                this.initEchart(res1,res2)
            })
      },
    //初始化图表
    initEchart(res1,res2) {
      echarts.init(document.getElementById("echart")).dispose();
      var myChart = echarts.init(document.getElementById("echart"));
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: res1,
          axisLabel:{
              formatter(val){
                  return (val.split('').join('\n'))
              }
          } 
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: res2,
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>